<template>
    <div class="content d-flex" >
        <div class="block">
            <!-- 轮播图组件-->
            <el-carousel trigger="click" height="267px" >
                <el-carousel-item v-for="i of detail.imagenum" :key="i" >
                    <img :src="require(`../assets/house/${i}${detail.image}`)" alt=""  data-i="i">       
                </el-carousel-item>                         
            </el-carousel>
            <div id="mapContainer"></div>
        </div>
        <div class="message">
            <!-- 详细信息-->
            <p >{{detail.dname}}</p>
            <p >{{detail.description}}</p>
            <div class="info">
                <ul>
                    <li>价格：</li>
                    <li>¥{{price}}</li>
                    <li>已售：</li>
                    <li>{{detail.sold}}</li>
                    <li></li>
                    <li>满意度:</li>
                    <li>100%</li>
                    <li></li>
                    <li>感兴趣:</li>
                    <li>4251人</li>
                </ul>
            </div>
            <p>本次活动由具有完整旅行资质的合作商提供</p>
            <p class="line"></p>
            <div>
                <p>出发城市：{{detail.depart}}</p>
                <div class="block" >
                    <span >出游日期:</span> 
                    <el-date-picker v-model="value" type="date" size="large" :placeholder="date.slice(0,-1)"></el-date-picker>
                </div>
                <div @click="changeMenu">选择套餐: <span class="menu" :class="{menu_active:active==i}" v-for="(item,i) of meal" :key="item.id" :data-i="i">{{item.menu}}</span></div>
                <div>
                    出游人数：<el-input-number v-model="num"  :min="1" :max="100" label="出游人数:" size="small"></el-input-number>
                </div>
                <p class="trip">出行天数：{{detail.days}}</p>
                <p>是否可退：可退</p>
                <el-row>
                    <el-button type="danger" @click="join">加入购物车</el-button>
                </el-row>
            </div>
        </div>
      </div>
</template>
<script>
import {mealDate} from '../assets/js/apis/getMeal.js' //封装了套餐信息请求
export default {
    data() {
        return {
            meal:[{price:0}],
            value:'',
            price:0,
            active:0,
            num:1,
        }
    },
    props:['detail','date','id'],
    mounted() {
        // this.getMeal();
        mealDate(this.id).then(result=>{
          this.meal=result.results;
          this.price=this.meal[0].price;  
        })
    },
    methods:{
        //更换套餐,事件委托
        changeMenu(e){
            if(e.target.tagName=="SPAN"){
                let i=e.target.dataset.i;
                this.price=this.meal[i].price;
                this.active=i;
            }       
        },
        //加入购物车
        join(){
            if(this.$store.state.user===null){
                this.$message({ message: '请先登录',duration: 3000});
            }else{
            this.axios.post('/shopping_car',
                `uid=${this.$store.state.user.uid}&pid=${this.id}&people=${this.num}&unit_price=${this.price}&is_checked=0`
            ).then(result=>{
                // console.log(result.data);
                if(result.data.code==200){
                    this.$message({ message: '加入购物车成功',type: 'success',duration: 3000});
                }else{
                    this.$message('加入购物车失败,请重新尝试');
                }
            })
            }
        },
        
    }
}
</script>
<style scoped>
.content{
    width: 1200px;
    background-color: #fff;
    margin: 0 auto;
}
.d-flex{display: flex;width: 1200px;margin: 0 auto;padding:0 0 0 20px;}
.line{border-bottom: 1px dashed #ccc;margin: 10px 0;}
.block{width: 500px;padding: 10px 0 10px 0;}
#mapContainer{
    margin-top: 20px;
    width: 500px;height: 300px;
    border: 1px solid #ccc;
}
.message{
    margin-left: 20px;
    font-size: 12px;
    padding: 10px 0;
}
.message>p:first-child{font-size:18px ;margin:10px 0}
.message>p:nth-child(2){margin:10px 0}
.message .info{
    width: 640px;height: 75px;
    background-color: blanchedalmond;
    line-height: 75px;
    margin-bottom:10px ;
}
.message>.info>ul{
  list-style: none;
  display: flex;
}
.message>.info li:first-child{margin-left:  10px;}
.message>.info li:nth-child(2){font-size: 20px;color: orange;margin:0  100px 0 30px;}
.message>.info li:nth-child(4),:nth-child(7){color: orange;margin-right:15px;}
.message>.info li:nth-child(5),:nth-child(8){border-right: 1px solid #aaa; margin:31.5px 15px 0  0 ;height: 12px;}
.message>.info li:nth-child(10){color: lightgreen;margin-right:15px;}
.menu{
    display: inline-block;
    padding: 7px 10px;
    border: 1px solid #aaa;
    margin: 10px 10px 20px 0;
    cursor: pointer;
}
.menu_active{border: 2px solid red;padding: 9px;}
.trip{margin: 20px 0;}
.trip+p{margin: 20px 0;}
</style>